<script setup lang="ts">
import { computed, ref } from "vue";
import { startRequest, RequestPath } from '../base/RequestWork';
import  {PageName}  from '../base/Router';
import Account from '../base/AccountStore';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

// 获取路由实例
const router = useRouter();
const account = Account();
// 用户名和密码数据
let username = ref("");
let password = ref("");

// 计算属性，控制登录和注册按钮是否可点击
let disabled = computed(() => {
  return !(username.value.length > 0 && password.value.length > 0);
});

// 定义登录响应数据类型
interface LoginResponseData {
  msg: string;
  info?: any;
  token?: string;
  error?: string;
}

// 登录方法
function login() {
  // 发起登录请求
  startRequest(RequestPath.login, 'post', {
    username: username.value,
    password: password.value
  }).then((response) => {
    // 将返回的数据解析为LoginResponseData对象
    const data = response.data as LoginResponseData;  // 修复：添加 .data
    if (data.msg === 'ok') {
      // 如果成功，则刷新账户状态
      account.login({
        info: data.info,
        token: data.token
      });
      
      // 弹出消息提醒，当消息提示栏自动消失时跳转到主页
      ElMessage.success({
        message: '登录成功',
        onClose: () => {
          router.push({
            name: PageName.home
          });
        }
      });
    } else {
      // 如果登录失败，则将后端返回的失败信息提示给用户
      ElMessage.error(data.error ?? '登录异常，请稍后重试');
    }
  }).catch((error) => {
    console.log(error);
    ElMessage.error('网络错误，请检查连接');
  });
}

// 注册方法
function signup() {
  // 发起注册请求
  startRequest(RequestPath.signup, 'post', {
    username: username.value,
    password: password.value,
    role: 'normal' // 默认用户端注册的账号角色为normal
  }).then((response) => {
    // 注册成功，则提示用户去登录
    const data = response.data as LoginResponseData;  // 修复：添加 .data
    
    if (data.msg === 'ok') {
      ElMessage.success({
        message: '注册成功，请您登录!'
      });
    } else {
      ElMessage.error(data.error ?? '注册异常，请稍后重试');
    }
  }).catch((error) => {
    console.log(error);
    ElMessage.error('网络错误，请检查连接');
  });
}

</script>

<template>
  <div id="container">
    <div id="title">
      <h1>精选好物任你挑选</h1>
    </div>

    <div class="input">
      <el-input
        v-model="username"
        prefix-icon="User"
        placeholder="请输入用户名"
      ></el-input>
    </div>

    <div class="input">
      <el-input
        v-model="password"
        prefix-icon="Lock"
        placeholder="请输入密码"
        show-password
      ></el-input>
    </div>

    <div class="input">
      <el-button
        @click="login"
        style="width: 350px"
        type="primary"
        :disabled="disabled"
      >
        登录
      </el-button>

      <el-button
        @click="signup"
        style="width: 150px"
        type="default"
        :disabled="disabled"
      >
        注册
      </el-button>
    </div>
  </div>
</template>
<style scoped>
/* 容器 */
#container {
  height: 1008px;
  width: 100%;
  position: absolute;
}

/* 模糊的背景 */
#background {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("/src/assets/background.webp");
  filter: blur(20px);
  background-size: cover;
}

/* 标题样式 */
#title {
  text-align: center;
  color: azure;
  margin-top: 200px;
}

/* 输入模块样式 */
.input {
  margin: 20px auto;
  width: 515px;
}
</style>